/*
 * @Author: xiaosihan 
 * @Date: 2023-08-19 02:09:58 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-08 01:03:38
 */


// import InfiniteScroll from "@components/InfiniteScroll";
import { DesignTemplateDate } from "#/type";
import { Cascader, Input } from "antd";
import { autorun, toJS } from "mobx";
import { useEffect, useState } from "react";
import styles from "./templateList.module.less";
import templateListStore from "./templateListStore";
import InfiniteScroll from "@/components/InfiniteScroll";
import DesignTemplateItem from "./DesignTemplateItem/DesignTemplateItem";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import { cloneDeep } from "lodash-es";

const { Search } = Input;

export default function TemplateList() {

  const [cascaderOptions, setCascaderOptions] = useState(toJS(templateListStore.cascaderOptions));
  const [activeid, setActiveid] = useState(toJS(templateListStore.activeid));

  const [loading, setLoading] = useState(false);
  const [hasNext, setHasNext] = useState(true);
  const [templateList, setTemplateList] = useState<Array<DesignTemplateDate>>([]);
  const [search, setSearch] = useState<string>('');
  useEffect(() => {
    templateListStore.getNextPage();
  }, []);

  // 监听商品id
  useEffect(() => autorun(() => {
    setCascaderOptions(toJS(templateListStore.cascaderOptions));
    setActiveid(toJS(templateListStore.activeid));

    setLoading(templateListStore.loading);
    setHasNext(templateListStore.hasNext);
    setTemplateList(toJS(templateListStore.designTemplates));
    setSearch(templateListStore.searchValue);
  }), []);

  const request = () => {
    templateListStore.getNextPage();
  }

  return (
    <div className={styles.templateList} >
      {/* <Radio.Group options={[
                { label: '模版列表', value: '0' },
                { label: '收藏模版', value: '1' },
            ]} onChange={async (v) => {
                let val = v.target.value;
                setActive(val);
                currentPage.current = 0;
                setTemplateList([]);
                setHasNext(true);
                if (val === '0') {
                    getTemplate(goodsId, true);
                } else {
                    collectionList(true);
                }
            }} value={active} buttonStyle="solid" optionType="button" /> */}

      <div className={styles.templateListGroup} >

        <div className={styles.designTemplateGroup} >
          <span className={styles.label} >分组</span>
          <Cascader
            options={cascaderOptions}
            value={activeid}
            className={styles.Cascader}
            style={{ width: 'calc(100% - 40px)' }}
            onChange={(activeid) => {
              templateListStore.setActiveid(activeid as [number, number]);
            }}
          />
        </div>

        <Search
          placeholder="请输入模版名称"
          enterButton="查询"
          className={styles.searchBtn}
          value={search}
          onChange={(v) => {
            templateListStore.setSearchValue(v.target.value);
          }}
          onSearch={() => {
            templateListStore.setCurrentPage(0);
            templateListStore.setDesignTemplates([]);
            templateListStore.getNextPage();
          }} />
      </div>
      <InfiniteScroll
        hasNext={hasNext}
        loading={loading}
        height='calc(100% - 99px)'
        // request={active === '0' ? request : request2}
        request={request}
        list={templateList}
      >
        {
          templateList.map((s, i) => {
            return (
              <DesignTemplateItem
                key={i}
                {...s}
                onClick={() => {
                  const { goodsData, activeComponent } = editorStore;
                  const fabricMark = designEditor.fabricMarkMap.get(activeComponent);
                  if (goodsData && fabricMark) {
                    const component = goodsData.component.find(c => c.key === activeComponent);
                    if (component) {
                      const { print_area_left, print_area_top, print_area_width, print_area_height } = component;

                      let offsetLeft = 0; // 根据打印位置计算模版元素的偏移量
                      let offsetTop = 0;
                      let offsetScale = 1;

                      // 200mm*265mm 的局部印 和 280mm*350mm的局部印
                      if ([200, 280].includes(print_area_width)) {
                        offsetScale = (print_area_width / fabricMark.sideLength) / (400 / 1024);
                        offsetLeft = ((print_area_left + (print_area_width / 2)) / fabricMark.sideLength) * 1024 - 200;
                        offsetTop = ((print_area_top + (print_area_height / 2)) / fabricMark.sideLength) * 1024 - 265;
                        //满版印就居中
                      } else {
                        offsetScale = 1;
                        offsetLeft = (512 - 200);
                        offsetTop = (512 - 265);
                      }

                      const designData = cloneDeep(s.designData);
                      designData.objects.map((o: fabric.Object) => {
                        o.left! += offsetLeft;
                        o.top! += offsetTop;
                        o.scaleX! *= offsetScale;
                        o.scaleY! *= offsetScale;
                      });
                      editorStore.setLoadding(true);
                      // 保留底色
                      designData.background = designEditor.fabricCanvas.backgroundColor;
                      designEditor.clear();
                      designEditor.fabricCanvas.loadFromJSON(designData, () => {
                        editorStore.setLoadding(false);
                      });
                    }
                  }
                }}
              />
            );
          })
        }
      </InfiniteScroll>

    </div>
  );

}